<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航</title>
	<style>
		*{margin: 0;padding: 0;list-style-type: none;}
		.left-nav{
			position:fixed;
			top:150px;
			left:100px;
			font-size: 20px;
		}
		.left-nav>li{
			width: 100px;
			height: 100px;
			background:#cc99ff;
			text-align: center;
			line-height: 100px;
			position:relative;
		}
		.left-nav>li>ul{
			width: 400px;
			position:absolute;
			top:0;
			left:100px;
			display:none;
		}
		.left-nav>li:hover ul{
			display: block;
		}
		.left-nav>li>ul li{
			width: 100px;
			height: 100px;
			float:left;
		}
		.left-nav>li>ul li:hover{
			background: #cc33ff;
		}
	</style>
</head>
<body>
	<nav class="left-nav">
		<li>皇马
			<ul>
				<li>拉莫斯</li>
				<li>莫德里奇</li>
				<li>贝尔</li>
				<li>本泽马</li>
			</ul>
		</li>
		<li>尤文图斯
			<ul>
				<li>c罗</li>
				<li>迪巴拉</li>
				<li>曼珠基奇</li>
				<li>佩林</li>
			</ul>
		</li>
		<li>
			拜仁
			<ul>
				<li>J罗</li>
				<li>罗本</li>
				<li>穆勒</li>
				<li>基米希</li>
			</ul>
		</li>
<li>
	阿森纳
	<ul>
		<li>厄齐尔</li>
		<li>扎卡</li>
		<li>切赫</li>
		<li>贝莱林</li>
	</ul>
</li>

	</nav>
</body>
</html>